{*
SPDX-FileCopyrightText: © 2024 Olivier Meunier <olivier@neokraft.net>

SPDX-License-Identifier: AGPL-3.0-only
*}
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Video Player - Readeck</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="csp-nonce" content="{{ cspNonce }}" />
  <meta name="robots" content="noindex nofollow noarchive">
  <link rel="icon" href="{{ assetURL(`img/fi/favicon.ico`) }}">

  <style nonce="{{ cspNonce }}">
  html {
    overflow: hidden;
  }
  body {
    background-color: #000;
    color: #fff;
    height: 100%;
    width: 100%;
    overflow: hidden;
    position: absolute;
    margin: 0;
    padding: 0;
  }
  video {
    width: 100%;
    height: auto;
    aspect-ratio: {{ .Width }}/{{ .Height }};
  }
  </style>
</head>
<body>
{{- if .Type == "hls" -}}
  <video id="video" controls data-manifest="{{ .Src }}" controls
  width="{{ .Width }}" height="{{ .Height }}"></video>
  <script src="{{ assetURL(`vendor/hls.js`) }}" nonce="{{ cspNonce }}"></script>
  <script nonce="{{ cspNonce }}">
    const video = document.getElementById('video')
    const src = video.dataset.manifest

    if (Hls.isSupported()) {
      var hls = new Hls();
      hls.on(Hls.Events.MEDIA_ATTACHED, function () {
        video.play()
      });
      hls.loadSource(src)
      hls.attachMedia(video)
    }
  </script>
{{- else -}}
  <video id="video" controls autoplay src="{{ .Src }}" width="{{ .Width }}" height="{{ .Height }}"></video>
{{- end -}}
</body>
</html>
